<template>
  <el-table :data="tableData" height="100%" :span-method="spanMethod" border>
    <el-table-column prop="id" label="id" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" label="Amount 1" />
    <el-table-column prop="amount2" label="Amount 2" />
    <el-table-column prop="amount3" label="Amount 3" />
  </el-table>
</template>

<script setup>
import useMergeTableRow from '@/hooks/useMergeTableRow'
const tableData = [
  {
    id: '0',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '1',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '2',
    name: 'Tom2',
    amount1: '324',
    amount2: '1.9',
    amount3: 12,
  },
  {
    id: '3',
    name: 'Tom',
    amount1: '621',
    amount2: '1.9',
    amount3: 17,
  },
  {
    id: '4',
    name: 'Tom',
    amount1: '621',
    amount2: '4.1',
    amount3: 15,
  },
]

const keys = {
  1: 'name',
  2: 'amount1',
  3: 'amount2',
  4: 'amount3',
}
const spanMethod = useMergeTableRow(tableData, keys)
</script>
